
<!-- http1_vs_http2.html -->

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>http1 vs http2</title>
	<!-- 引入jQuery -->
	<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<style>
		.box {
			float: left;
			width: 200px;
			margin-right: 100px;
			margin-bottom: 50px;
			padding: 20px;
			border: 4px solid pink;
			font-family: Microsoft Yahei;
		}

		.box h2 {
			margin: 5px 0;
		}

		.box .done {
			color: pink;
			font-weight: bold;
			font-size: 18px;
		}

		.box button {
			padding: 10px;
			display: block;
			margin: 10px 0;
		}
	</style>
</head>

<body>


		<div class="box">
			<h2>Http1.x<br>(开启https)</h2>
			<p>Time: <span id="output-http1"></span></p>
			<p class="done done-1">× Unfinished...</p>
			<button class="btn-1">Get https1.1 Response</button>
		</div>

		<div class="box">
			<h2>Http2</h2>
			<p>Time: <span id="output-http2"></span></p>
			<p class="done done-1">× Unfinished...</p>
			<button class="btn-2">Get http2 Response</button>
		</div>

		<div class="box">
			<h2>Http1.x<br>(不开启https)</h2>
			<p>Time: <span id="output-http3"></span></p>
			<p class="done done-1">× Unfinished...</p>
			<button class="btn-3">Get http1.1 Response</button>
		</div>

		<div class="box">
			<h2>Options</h2>
			<p>Request Num: <input type="text" id="req-num"></p>
			<p>Request Size (Mb): <input type="text" id="req-size"></p>
			<p>Request Delay (ms): <input type="text" id="req-delay"></p>
			<button class="btn-4">Get All Response</button>
		</div>


	<script>

		let boxes = document.querySelectorAll('.box')
		let doneTip = document.querySelectorAll('.done')
		let reqNumInput = document.querySelector('#req-num')
		let reqSizeInput = document.querySelector('#req-size')
		let reqDelayInput = document.querySelector('#req-delay')
		// 计算两种协议的时间差
		let diff = document.getElementById('#diff')

		let reqNum = 100
		let reqSize = 0.1
		let reqDelay = 30

		let count = 0
		reqNumInput.value = reqNum
		reqSizeInput.value = reqSize
		reqDelayInput.value = reqDelay

		reqNumInput.onblur = function () {
			reqNum = reqNumInput.value
		}

		reqSizeInput.onblur = function () {
			reqSize = reqSizeInput.value
		}

		reqDelayInput.onblur = function () {
			reqDelay = reqDelayInput.value
		}

		function imageLoadTime(id, pageStart, index) {
			let gap = Date.now() - pageStart
			// let lapsed = Date.now() - pageStart;
			//document.getElementById(id).innerHTML = ((gap) / 1000).toFixed(2) + 's'
			document.getElementById(id).innerHTML = gap + 'ms'
		}

		function clickEvents(index, url, output, server) {
			doneTip[index].innerHTML = '× Unfinished...'
			doneTip[index].style.color = 'pink'
			boxes[index].style.borderColor = 'pink'
			let pageStart = Date.now()
			for (let i = 0; i < reqNum; i++) {
				$.get(url, function (data) {
					imageLoadTime(output, pageStart, index)

					if (i === reqNum - 1) {
						//console.log('修改dom前',doneTip[index].innerHTML)
						doneTip[index].innerHTML = '√ Finished!'
						doneTip[index].style.color = 'lightgreen'
						boxes[index].style.borderColor = 'lightgreen'
						//console.log('修改dom后',doneTip[index].innerHTML)

						count++
						//console.log('count++后变为',count)
						if (count === 3) {
							count = 0 //初始化count 防止只有载入页面后第一次点击后生效，之后再点击count就会一直增 而不会再等于3了
							let time1 = parseInt(document.getElementById('output-http1').innerHTML)
							let time2 = parseInt(document.getElementById('output-http2').innerHTML)
							let time3 = parseInt(document.getElementById('output-http3').innerHTML)
							if (time1 < time2) {
								let timeDifference = time2 - time1
								/* 不加setTimeout的话 会出现先弹框之后 再进行DOM渲染
								然后如果setTimeout不传入时间 也会先弹框再DOM渲染 为什么？？
								HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，
								如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。
								另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。
								这时使用requestAnimationFrame()的效果要好于setTimeout() 。 */
								setTimeout(() => {
									alert(`请求${reqNumInput.value}个文件，每个文件的大小为${reqSizeInput.value}Mb，后端处理请求的时间为${reqDelayInput.value}ms时，Http2比开启https的Http1.1慢：${timeDifference} ms`)
								}, 100)
							} else if (time1 === time2) {
								setTimeout(() => {
									alert(`请求${reqNumInput.value}个文件，每个文件的大小为${reqSizeInput.value}Mb，后端处理请求的时间为${reqDelayInput.value}ms时，Http2和开启https的Http1.1一样快`)
								}, 100)
							} else {
								let timeDifference = time1 - time2
								setTimeout(() => {
									alert(`请求${reqNumInput.value}个文件，每个文件的大小为${reqSizeInput.value}Mb，后端处理请求的时间为${reqDelayInput.value}ms时，Http2比开启https的Http1.1快：${timeDifference} ms`)
								}, 100)
							}

							if (time3 < time2) {
								let timeDifference = time2 - time3
								/* 不加setTimeout的话 会出现先弹框之后 再进行DOM渲染
								然后如果setTimeout不传入时间 也会先弹框再DOM渲染 为什么？？
								HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，
								如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。
								另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。
								这时使用requestAnimationFrame()的效果要好于setTimeout() 。 */
								setTimeout(() => {
									alert(`请求${reqNumInput.value}个文件，每个文件的大小为${reqSizeInput.value}Mb，后端处理请求的时间为${reqDelayInput.value}ms时，Http2比不开启https的Http1.1慢：${timeDifference} ms`)
								}, 15)
							} else if (time1 === time2) {
								setTimeout(() => {
									alert(`请求${reqNumInput.value}个文件，每个文件的大小为${reqSizeInput.value}Mb，后端处理请求的时间为${reqDelayInput.value}ms时，Http2和不开启https的Http1.1一样快`)
								}, 15)
							} else {
								let timeDifference = time3 - time2
								setTimeout(() => {
									alert(`请求${reqNumInput.value}个文件，每个文件的大小为${reqSizeInput.value}Mb，后端处理请求的时间为${reqDelayInput.value}ms时，Http2比不开启https的Http1.1快：${timeDifference} ms`)
								}, 15)
							}

						}


					}
				})
			}
		}


		document.querySelector('.btn-1').onclick = function () {
			clickEvents(0, 'https://localhost:1001/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http1', 'http1.x')
		}

		document.querySelector('.btn-2').onclick = function () {
			clickEvents(1, 'https://localhost:1002/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http2', 'http2')
		}

		document.querySelector('.btn-3').onclick = function () {
			clickEvents(2, 'http://localhost:1000/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http3', 'http1.1')
		}

		document.querySelector('.btn-4').onclick = function () {
			clickEvents(0, 'https://localhost:1001/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http1', 'https_1.1')
			clickEvents(1, 'https://localhost:1002/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http2', 'http2')
			clickEvents(2, 'http://localhost:1000/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http3', 'http1.1')
		}

		document.onkeydown=function(e){    //对整个页面监听  
			var keyNum=window.event ? e.keyCode :e.which;       //获取被按下的键值  
			//判断如果用户按下了回车键（keycody=13）  
			if(keyNum==13){  
				clickEvents(0, 'https://localhost:1001/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http1', 'https_1.1')
				clickEvents(1, 'https://localhost:1002/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http2', 'http2')
				clickEvents(2, 'http://localhost:1000/option?size=' + reqSize + '&delay=' + reqDelay, 'output-http3', 'http1.1')  
			}  
		}
	</script>
</body>

</html>